<template>
  <div class="tccontainer">
    <div class="sidebar" ref="sidebar">
      <slot   name="left"></slot>
    </div>
    <div class="resizer" @mousedown="startResize"></div>
    <div  class="main-content" ref="maincontent">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>

export default {
  methods:{
    startResize(event) {
      this.initX = event.clientX;
      this.sidebarWidth = this.$refs.sidebar.offsetWidth;
      this.mainWidth = this.$refs.maincontent.offsetWidth;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
    },
    resize(event) {
      const deltaX = event.clientX - this.initX;
      this.$refs.sidebar.style.width = `${this.sidebarWidth + deltaX}px`;
      this.$refs.maincontent.style.width = `${this.mainWidth - deltaX}px`;
    },
    stopResize() {
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
    },
  },
}
</script>

<style scoped>
.tccontainer {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: row;
}
.sidebar {
  background-color: #f0f0f0;
  width: 500px;
  min-width: 100px;
  overflow-x: auto;
}
.resizer {
  cursor: col-resize;
  background-color: #333;
  width: 5px;
  height: 100%;
}
.main-content {
  flex-grow: 1;
  overflow-x: auto;
  width:calc(100vw - 500px);
}
</style>
